<template>
  <div class="login-wrapper" v-if="isLoginItemVisible">
    <el-dialog :visible.sync="isLoginItemVisible" width="500px" :before-close="handleClose">
      <div class="content">
        <el-image :src="iconUrl" fit="cover" class="icon"></el-image>
        <el-form :model="loginInfo" ref="loginInfo" :rules="rules" label-width="20%" class="login-info">
          <el-form-item label="账号" prop="userId">
            <el-select v-model="loginInfo.userId" width="100%">
              <el-option v-for="index in 10" :key="index" :label="`leeyu${index-1}`" :value="`leeyu${index-1}`"></el-option>
            </el-select>
            <!-- <el-input type="text" v-model="loginInfo.userId" autocomplete="off" disabled></el-input> -->
          </el-form-item>
          <!-- <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginInfo.password" autocomplete="off" disabled></el-input>
          </el-form-item> -->
        </el-form>
        <el-button type="primary" @click="onSubmit('loginInfo')">登 录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name:'LoginItem',
  data() {
    let checkUserId = (rule, value, callback) =>{
      let re =  /^(?![^a-zA-Z]+$)(?!\D+$).{2,15}$/;//正则判断字符串是否为数字和字母组合
      if (value === '') {
        callback(new Error('请输入账号'));
      } else if (!re.test(value)) {
        callback(new Error('账号必须由数字和字母组成，长度小于15！'));
      } else{
        callback();
      }
    };
    let checkPassWord = (rule, value, callback) =>{
      // if (value === '') {
      //   this.loginInfoCheck.isPassWordCheck = false;
      //   callback(new Error('请输入密码'));
      // } else {
      //   console.log('密码验证通过！');
      //   this.loginInfoCheck.isPassWordCheck = true;
      //   callback();
      // }
      
      // 不检测密码
      callback();
    };
    return {
      iconUrl:require("../../assets/image/logo.jpg"),
      loginInfo: {
        userId: 'leeyu0',
        password: ''
      },
      rules: {
        userId: [
          { required: true, validator: checkUserId, trigger: 'blur' }
        ],
        password: [
          { validator: checkPassWord, trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    ...mapState({
      isLoginItemVisible: state => state.user.isLoginItemVisible
    })
  },
  methods:{
    handleClose() {
      this.$store.commit('toggleIsLoginItemVisible',false);
    },
    onSubmit(ref) {
      // 点击提交后触发表单校验
      this.$refs[ref].validate(valid => {
        if (!valid) {
          return false;
        }
        this.login();
      });
    },
    login() {
      this.$store.commit('toggleIsLoginItemVisible',false);
      this.$store.dispatch('login',this.loginInfo.userId);
    }
  }
}
</script>

<style scoped>
.content {
  text-align: center;
}
.login-info {
  width: 300px;
  padding-left: 60px;
}
.icon {
  padding-bottom:20px;
  width: 100px; 
  height: 100px;
}
</style>
